import React, { useState, useEffect, useContext } from 'react';
import { Row, Col, Card, Form, Input, Icon, Button, Table, Tabs, Select, Spin, Descriptions, Modal} from 'antd';
import {connect} from 'dva';
import dynamic from 'umi/dynamic';
import LoadingComponent from '@/components/PageLoading/index';
import ProblemDetail from '../common/problem/detail/ProblemDetail';
import FunctionConfDetail from '../common/functionConf/detail/FunctionConfDetail';
import IctDetail from '../common/ict/detail/IctDetail';
import UpgradeDetail from '../common/upgrade/detail/UpgradeDetail';
import TroubleDetail from '../common/trouble/detail/TroubleDetail';
import SettlementDetail from '../common/settlement/detail/SettlementDetail';

const {info} = Modal;


const ProcessRecords = dynamic({
  loader: () => import('@/pages/Common/Flow/ProcessRecords'),
  Loading: LoadingComponent,
});
const namespace = 'afterSale';
function AfterSaleDetail(props) {

  // 初始化
  useEffect(() => {
  }, [props.selectRecord]);

  const saveDisplay = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveDisplay`,
      payload: params,
    });
  };

  const backMainPage = isRealod => {
    saveDisplay("block");
    saveSelectRecord({});
  };

  // 通过dva存当前需要传递的数据
  const saveSelectRecord = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveSelectRecord`,
      payload: params,
    });
  };

  const getAfterSaleDetail = () => {
    switch (props.supportType) {
      case '1000':
        return (<ProblemDetail/>);
      case '1100':
        return (<FunctionConfDetail/>);
      case '1200':
        return (<TroubleDetail />);
      case '1300':
        return (<UpgradeDetail/>);
      case '1400':
        return (<IctDetail/>);
      case '1500':
        return (<SettlementDetail />);
      default:
        return <sapn>{props.supportType}</sapn>
    }
  };

  return(
    <div>
      <Card
        title="售中售后任务详情"
        className="cute"
        extra={
          <Button className="margin-left" type="primary" onClick={() => {
            backMainPage()
          }}>
            返回
          </Button>
        }
        >
        <Descriptions>
          <Descriptions.Item label="任务单号">{props.selectRecord.orderNumber}</Descriptions.Item>
          <Descriptions.Item label="任务单名称">{props.selectRecord.orderName}</Descriptions.Item>
          <Descriptions.Item label="任务发起时间">{props.selectRecord.createDate}</Descriptions.Item>
          <Descriptions.Item label="任务单类型">{props.selectRecord.orderTypeName}</Descriptions.Item>
          <Descriptions.Item label="创建人">{props.selectRecord.createStaffName}</Descriptions.Item>
        </Descriptions>
      </Card>
      <Card
        title="售中售后支撑详情"
        className="cute">
        {getAfterSaleDetail()}

      </Card>
      {
        props.selectRecord.orderId ? <ProcessRecords orderId={props.selectRecord.orderId}/> : null
      }
    </div>
  )
}
export default connect(({afterSale, setting}) => ({
  display: afterSale.display,
  selectRecord: afterSale.selectRecord,
  supportType:afterSale.supportType,
  size: setting.size,
}))(Form.create()(AfterSaleDetail));
